<template>
<header>
    <div class="all">
        <div class="left">
            <i></i>
            <span>{{login.name }} / {{login.role}}</span>
        </div>
        <div class="right" @click="logout">
            <i></i>
            <span>注销</span>
        </div>
    </div>
</header>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: "headerBar",
        props:['login','urls'],
        data (){
            return {

            }
        },
        created:function(){

        },
        computed:{

        },
        methods:{
            logout(){
                var _this = this;
                layui.use('layer', function(){
                    var layer = layui.layer;
                    layer.confirm('您确定要注销登录吗？', {icon: 3, title:'提示'}, function(index){
                        layer.close(index);
                        $.get(_this.urls.event.logout,function(res){
                            if(res.code === '1'){
                                _this.$emit('clearCookie','token');
                                window.location.href = '/login';//注销成功跳转页面
                            }

                        })

                    });
                });
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../static/css/style.less";
    header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: @cf;
        .bs(0 0 5px #ccc);
        .pf;
        left: 0;
        top: 0;
        z-index: 9998;
        .all{
           .pa;
            right: 35px;
            .left,.right{
                .fl;
                cursor: pointer;
            }
            .left{
                margin-right: 15px;
                i{
                    width:18px;
                    height:18px;
                    display: inline-block;
                    .pr;
                    top: 3px;
                    .bud("../../static/images/left.svg",center center,cover);
                }

            }
            .right{
                i{
                    width: 20px;
                    height: 18px;
                    display: inline-block;
                    .pr;
                    top: 4px;
                    .bud("../../static/images/right.svg",center center,cover);
                }
            }
        }
    }
</style>